<template>
  <article>
    <section
      class="chart_container"
      :style="{ width: outerWidth, height: outerHeight }"
    >
      <!-- 图表 -->
      <div
        :id="id"
        class="chart"
        :style="{ width: outerWidth, height: outerHeight }"
      />
    </section>

    <!-- 底座 -->
    <!-- <div class="remark" :style="{ width: outerWidth }">
      <div class="pedestal">
        <div
          class="top"
          :style="{
            width: pedestalWidth,
            background: pedestalColor,
          }"
        >
          <p
            :style="{
              width: pedestalWidth,
              background: pedestalColor,
              'box-shadow': pedestalBoxShadow,
            }"
          />
        </div>
        <div
          class="front"
          :style="{
            width: pedestalWidth,
            background: pedestalColor,
          }"
        />
      </div>
    </div> -->
  </article>
</template>

<script>
import common from "@/mixins/common";

import "echarts-gl";
/*
vstyle: {
  outer: {
    outerRadius: 75,
    innerRadius: 60,
    color: '',
    startColor: '',
    endColor: '',
    borderColor: '',
    backgroundColor: '',
    startAngle: '',
    endAngle: ''
  },
  inner: {
    outerRadius: 55,
    innerRadius: 50,
    color: '',
    startColor: '',
    endColor: '',
    backgroundColor: '',
    startAngle: '',
    endAngle: ''
  },
  circle: {
    color: '',
    radius: '',
    centerColor: '',
    centerBorderColor: ''
  },
  pointer: {
    color: '',
    startColor: '',
    endColor: '',
    length: '',
    width: ''
  },
  pedestal: {
    color: '',
    width: ''
  }
}
*/
export default {
  mixins: [common],
  props: {
    id: {
      type: String,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
    other: {
      type: Object,
      default: null,
    },
    vstyle: {
      type: Object,
      default: null,
    },
  },
  computed: {
    outerWidth() {
      try {
        if (this.vstyle && this.vstyle.outer.outerRadius) {
          return this.vstyle.outer.outerRadius * 2 + "px";
        }
      } catch (e) {
        return "150px";
      }
      return "150px";
    },
    outerHeight() {
      try {
        if (this.vstyle && this.vstyle.outer.outerRadius) {
          return this.vstyle.outer.outerRadius * 2 + 20 + "px";
        }
      } catch (e) {
        return "170px";
      }
      return "170px";
    },
    outerSize() {
      let size;
      try {
        size = this.vstyle.outer.outerRadius - this.vstyle.outer.innerRadius;
      } catch (e) {
        return 15;
      }
      return isNaN(size) ? 15 : size;
    },
    innerSize() {
      let size;
      try {
        size = this.vstyle.inner.outerRadius - this.vstyle.inner.innerRadius;
      } catch (e) {
        return 5;
      }
      return isNaN(size) ? 5 : size;
    },
    pedestalWidth() {
      try {
        if (this.vstyle && this.vstyle.pedestal.width) {
          return this.vstyle.outer.outerRadius + "px";
        }
      } catch (e) {
        return "75px";
      }

      return "75px";
    },
    pedestalColor() {
      try {
        if (this.vstyle && this.vstyle.pedestal.color) {
          return `linear-gradient(
            to top,
            rgba(0,0,0,0) 30%,
            ${this.vstyle.pedestal.color} 100%)`;
        }
      } catch (e) {
        return "linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(11, 216, 232, 0.4) 100%)";
      }

      return "linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(11, 216, 232, 0.4) 100%)";
    },
    pedestalBoxShadow() {
      const shadow = "inset 0 10px 4px -6px rgba(255,255,255,0.5)";
      return shadow;
    },
  },
  methods: {
    // 基本公共配置 - 默认值配置
    defaultDeploy(type, style) {
      const start = type === "outer" ? 230 : 225;
      const end = type === "outer" ? -50 : -45;
      const radius = type === "outer" ? 75 : 55;
      let max = this.data.max || 100;
      return {
        type: "gauge",
        startAngle: (style && style.startAngle) || start,
        endAngle: (style && style.endAngle) || end,
        radius: (style && style.outerRadius) || radius,
        axisTick: {
          lineStyle: {
            width: 0,
          },
        },
        axisLabel: {
          show: false,
        },
        detail: {
          show: false,
        },
        min: this.data.min || 0,
        max: max,
      };
    },
    // 配置圆心图形
    deployGraphic() {
      if (!this.vstyle) return "";
      return [
        {
          type: "group",
          left: "center",
          top: "center",
          children: [
            {
              type: "circle",
              // 不设置宽高定位失效
              left: "center",
              top: "center",
              shape: {
                cx: 0,
                cy: 0,
                r: (this.vstyle.circle && this.vstyle.circle.radius) || 40,
              },
              style: {
                fill: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0.3,
                      color: "transparent", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color:
                        (this.vstyle.circle && this.vstyle.circle.color) ||
                        "#0e646e", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
            {
              type: "circle",
              z: 5,
              // 不设置宽高定位失效
              left: "center",
              top: "center",
              shape: {
                cx: 0,
                cy: 0,
                r: 5,
              },
              style: {
                fill:
                  (this.vstyle.circle &&
                    this.vstyle.circle.centerBorderColor) ||
                  "#fff",
              },
            },
            {
              type: "circle",
              z: 10,
              // 不设置宽高定位失效
              left: "center",
              top: "center",
              shape: {
                cx: 0,
                cy: 0,
                r: 3,
              },
              style: {
                fill:
                  (this.vstyle.circle && this.vstyle.circle.centerColor) ||
                  "#118491",
              },
            },
          ],
        },
      ];
    },
    // 外层刻度
    outerBorder() {
      return {
        ...this.defaultDeploy("outer", this.vstyle.outer),
        ...this.hiddenDeploy(["progress", "pointer"]),
        splitNumber: 16,
        z: 5,
        axisLine: {
          lineStyle: {
            width: this.outerSize,
            color: [[1, "transparent"]],
          },
        },
        splitLine: {
          distance: -1 * this.outerSize,
          length: this.outerSize,
          lineStyle: {
            color:
              (this.vstyle.outer && this.vstyle.outer.borderColor) || "#161a1f",
            width: 2,
          },
        },
      };
    },
    // 外层值
    outerBoard() {
      return {
        ...this.defaultDeploy("outer", this.vstyle.outer),
        ...this.hiddenDeploy(["splitLine", "pointer"]),
        axisLine: {
          lineStyle: {
            width: this.outerSize,
            color: [
              [
                1,
                (this.vstyle.outer && this.vstyle.outer.backgroundColor) ||
                  "#2b3e51",
              ],
            ],
          },
        },
        progress: {
          show: true,
          width: this.outerSize,
          itemStyle: {
            color: this.color(this.vstyle.outer),
          },
        },
        data: [{ value: this.data.value || 60 }],
      };
    },
    // 内层值
    coreBoard() {
      return {
        ...this.defaultDeploy("inner", this.vstyle.inner),
        ...this.hiddenDeploy(["splitLine"]),
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: this.innerSize,
            color: [[1, "#2b3e51"]],
          },
        },
        progress: {
          show: true,
          width: this.innerSize,
          clip: true,
          roundCap: true,
          itemStyle: {
            borderCap: "round",
            color: this.color(this.vstyle.inner),
          },
        },
        pointer: {
          // 指针
          show: true,
          width: (this.vstyle.pointer && this.vstyle.pointer.width) || 7,
          length: (this.vstyle.pointer && this.vstyle.pointer.length) || 49,
          icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
          offsetCenter: [0, 8],
          itemStyle: {
            color: this.color(this.vstyle.pointer),
          },
        },
        data: [{ value: this.data.value || 60 }],
      };
    },
    // 底座
    pedestal() {
      return {
        type: "bar3D",
        name: "1",
        barSize: 50,
        bevelSize: 0.05,
        silent: true,
        data: [
          {
            value: [75, 40, -7],
            itemStyle: {
              color:
                (this.vstyle.pedestal && this.vstyle.pedestal.color) ||
                "#066db8",
              opacity: 0.5,
            },
          },
        ],
        stack: "stack",
        shading: "lambert",
        emphasis: {
          label: {
            show: false,
          },
        },
      };
    },
    // 配置option
    deployOption() {
      const option = {
        tooltip: {
          trigger: "",
        },
        // 圆心配置
        graphic: this.deployGraphic(),
        // ...this.hiddenDeploy(["xAxis3D", "yAxis3D", "zAxis3D"]),
        xAxis3D: {
          type: "category",
          data: new Array(150).map((i) => i),
          axisLine: {
            lineStyle: {
              color: "transparent",
              width: 0,
            },
          },
        },
        yAxis3D: {
          type: "category",
          data: new Array(150).map((i) => i),
          axisLine: {
            lineStyle: {
              color: "transparent",
              width: 0,
            },
          },
        },
        zAxis3D: {
          type: "category",
          data: new Array(150).map((i) => i),
          axisLine: {
            lineStyle: {
              color: "transparent",
              width: 0,
            },
          },
        },
        grid3D: {
          ...this.hiddenDeploy(["axisLabel", "splitLine", "axisPointer"]),
          boxWidth: 150,
          boxDepth: 180,
          light: {
            main: {
              alpha: 40,
              beta: 0,
              intensity: 1.2,
            },
            ambient: {
              intensity: 0.5,
            },
          },
          viewControl: {
            // alpha: 20, //控制场景平移旋转
            beta: 0,
            autoRotate: false,
            zoomSensitivity: 0,
            minAlpha: -7,
            maxAlpha: -7,
            minBeta: 0,
            maxBeta: 0,
          },
        },

        series: [
          // 内层圆环
          this.coreBoard(),
          // 外层圆环
          this.outerBorder(),
          // // 外层值
          this.outerBoard(),
          this.pedestal(),
        ],
      };
      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
.chart_container {
  overflow: visible;
}
.remark {
  margin-top: -6px;
  .pedestal {
    transform: rotateX(-14deg) translateZ(-30px);
    .top {
      height: 250px;
    }
    .front {
      height: 10px;
    }
  }
}
</style>
